import React from 'react'
import './index.less';
import { Form, Input, Button, Icon, Modal,message } from 'antd';
import Axios from './../../axios';
import Fingerprint from 'fingerprintjs';
const FormItem = Form.Item;
class Login extends React.Component {
    state = {
        loading: false,
    }
    componentWillMount() {
    }
    componentDidMount() {
        //获取设备id
        let uuid = localStorage.getItem("browserFingerprint");
        if (!uuid) {
            try {
                uuid = new Fingerprint({ canvas: true }).get();
                console.log(uuid)
                localStorage.setItem("browserFingerprint", uuid);
            } catch (err) {
                console.log("错误描述：" + err.description + "\n\n");
                uuid = this.RndNum(10);
                localStorage.setItem("browserFingerprint", uuid);
            }
        }

    }
    RndNum = (n) => {
        var rnd = "";
        for (var i = 0; i < n; i++) {
            rnd += Math.floor(Math.random() * 10);
        }
        return rnd;
    }
    handleSubmit = (e) => {
        let appName = navigator.appName;    //浏览器
        let appVersion = navigator.appVersion;  // 浏览器版本
        let deviceId = localStorage.getItem("browserFingerprint"); //设备唯一识别号
        let deviceName = appName + " " + appVersion;   //设备名称
        let that = this;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                //console.log('form values: ', values);
                let params = {
                    ...values,
                    deviceId,
                    deviceName,
                    that
                }
                this.setState({ loading: true })
                Axios.loginPost({
                    block: '/hr',
                    url: '/account/login',
                    params: params
                }).then(res => {
                    message.info(res.msg);
                    localStorage.setItem("X-Api-Key", res.object);
                    localStorage.setItem("X-User-Id", res.data);
                    localStorage.setItem("X-Client-Id", deviceId);
                    this.roleRequest();
                    window.open(`/#/home`, '_self');
                }).catch((error) => {
                    this.setState({ loading: false });
                    console.log(error);
                })
            }
        });
    }
    //获取当前用户前端菜单列表
    roleRequest = () => {
        Axios.get({
            block: '/hr',
            url: '/role/myMenus',
            params: {},
        }).then((data) => {
            let role = data.data || [];
            let isAdministrator = data.object;
            let Arr = [];
            role.map((item) => {
                let itemArr = JSON.parse(item);
                Arr = this.ArrayUnion(Arr, itemArr)
            })
            // console.log(Arr)
            localStorage.setItem("menusList", JSON.stringify(Arr));
            localStorage.setItem("isAdministrator", isAdministrator);

            //token 相关
            let deviceId = localStorage.getItem("X-Client-Id");
        }).catch((error) => {
            console.log(error);
            this.setState({ loading: false });
        })
    }
    //数组取并集
    ArrayUnion = (a, b) => {
        return a.concat(b.filter(v => !a.includes(v)))
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className='login'>
                <div className="login-box">
                    <div className="title">欢迎使用LIMS管理系统</div>
                    <Form>
                        <FormItem>
                            {getFieldDecorator('account', {
                                rules: [{ required: true, message: '请输入账号!' }],
                            })(
                                <Input prefix={<Icon type="user" />} type="text" size="large" placeholder="请输入账号" />
                            )
                            }
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('password', {
                                rules: [
                                    { required: true, message: '请输入密码!' },
                                    {
                                        min: 6,
                                        message: '密码长度不够！'
                                    },
                                ],
                            })(
                                <Input prefix={<Icon type="lock" />} type="password" size="large" placeholder="请输入密码" />
                            )
                            }
                        </FormItem>
                        <FormItem>
                            <Button type="primary" block={true} size="large" onClick={this.handleSubmit} loading={this.state.loading}>登录</Button>
                        </FormItem>
                    </Form>
                </div>
            </div>
        );
    }
}
export default Form.create()(Login);

